<template>
  <view class="index">
    <!-- 搜索 -->
    <!-- 获取焦点添加=》类名=》focused -->
    <view class="search focused1">
      <view class="sinput">
        <input type="text" placeholder="搜索" />
        <button>取消</button>
      </view>
      <!-- 搜索状态显示=》下边内容 -->
      <view class="scontent" style="display: none">
        <div class="title">
          搜索历史
          <span class="clear"></span>
        </div>
        <!-- 搜索历史 -->
        <div class="history">
          <navigator url="/pages/list/index">小米</navigator>
          <navigator url="/pages/list/index">智能电视</navigator>
          <navigator url="/pages/list/index">小米空气净化器</navigator>
          <navigator url="/pages/list/index">西门子洗碗机</navigator>
          <navigator url="/pages/list/index">华为手机</navigator>
          <navigator url="/pages/list/index">苹果</navigator>
          <navigator url="/pages/list/index">锤子</navigator>
        </div>
        <!-- 结果 -->
        <scroll-view scroll-y class="result">
          <navigator url="/pages/goods/index">小米</navigator>
          <navigator url="/pages/goods/index">小米</navigator>
          <navigator url="/pages/goods/index">小米</navigator>
          <navigator url="/pages/goods/index">小米</navigator>
          <navigator url="/pages/goods/index">小米</navigator>
          <navigator url="/pages/goods/index">小米</navigator>
          <navigator url="/pages/goods/index">小米</navigator>
          <navigator url="/pages/goods/index">小米</navigator>
          <navigator url="/pages/goods/index">小米</navigator>
          <navigator url="/pages/goods/index">小米</navigator>
          <navigator url="/pages/goods/index">小米</navigator>
          <navigator url="/pages/goods/index">小米</navigator>
          <navigator url="/pages/goods/index">小米</navigator>
          <navigator url="/pages/goods/index">小米</navigator>
          <navigator url="/pages/goods/index">小米</navigator>
          <navigator url="/pages/goods/index">小米</navigator>
          <navigator url="/pages/goods/index">小米</navigator>
          <navigator url="/pages/goods/index">小米</navigator>
        </scroll-view>
      </view>
    </view>
    <!-- 轮播图 -->
    <view class="slider">
      <swiper
        autoplay
        interval="2000"
        circular
        indicator-dots
        indicator-color="rgba(255,255,255,1)"
        indicator-active-color="rgba(255,255,255,.6)"
      >
        <swiper-item>
          <navigator url>
            <image src="/static/uploads/banner1.png" />
          </navigator>
        </swiper-item>
        <swiper-item>
          <navigator url>
            <image src="/static/uploads/banner2.png" />
          </navigator>
        </swiper-item>
        <swiper-item>
          <navigator url>
            <image src="/static/uploads/banner3.png" />
          </navigator>
        </swiper-item>
      </swiper>
    </view>
    <!-- 功能导航 -->
    <view class="navs">
      <navigator url>
        <image src="/static/uploads/icon_index_nav_1@2x.png" />
      </navigator>
      <navigator url>
        <image src="/static/uploads/icon_index_nav_2@2x.png" />
      </navigator>
      <navigator url>
        <image src="/static/uploads/icon_index_nav_3@2x.png" />
      </navigator>
      <navigator url>
        <image src="/static/uploads/icon_index_nav_4@2x.png" />
      </navigator>
    </view>
    <!-- 栏目楼层 -->
    <view class="floors">
      <!-- 1 -->
      <view class="floor">
        <!-- title -->
        <view class="ftitle">
          <image src="/static/uploads/pic_floor01_title.png" />
        </view>
        <!-- pics -->
        <view class="fitem">
          <navigator url>
            <image src="/static/uploads/pic_floor01_1@2x.png" />
          </navigator>
          <navigator url>
            <image src="/static/uploads/pic_floor01_2@2x.png" />
          </navigator>
          <navigator url>
            <image src="/static/uploads/pic_floor01_3@2x.png" />
          </navigator>
          <navigator url>
            <image src="/static/uploads/pic_floor01_4@2x.png" />
          </navigator>
          <navigator url>
            <image src="/static/uploads/pic_floor01_5@2x.png" />
          </navigator>
        </view>
      </view>
      <!-- 2 -->
      <view class="floor">
        <!-- title -->
        <view class="ftitle">
          <image src="/static/uploads/pic_floor02_title.png" />
        </view>
        <!-- pics -->
        <view class="fitem">
          <navigator url>
            <image src="/static/uploads/pic_floor02_1@2x.png" />
          </navigator>
          <navigator url>
            <image src="/static/uploads/pic_floor02_2@2x.png" />
          </navigator>
          <navigator url>
            <image src="/static/uploads/pic_floor02_3@2x.png" />
          </navigator>
          <navigator url>
            <image src="/static/uploads/pic_floor02_4@2x.png" />
          </navigator>
          <navigator url>
            <image src="/static/uploads/pic_floor02_5@2x.png" />
          </navigator>
        </view>
      </view>
      <!-- 3 -->
      <view class="floor">
        <!-- title -->
        <view class="ftitle">
          <image src="/static/uploads/pic_floor03_title.png" />
        </view>
        <!-- pics -->
        <view class="fitem">
          <navigator url>
            <image src="/static/uploads/pic_floor03_1@2x.png" />
          </navigator>
          <navigator url>
            <image src="/static/uploads/pic_floor03_2@2x.png" />
          </navigator>
          <navigator url>
            <image src="/static/uploads/pic_floor03_3@2x.png" />
          </navigator>
          <navigator url>
            <image src="/static/uploads/pic_floor03_4@2x.png" />
          </navigator>
          <navigator url>
            <image src="/static/uploads/pic_floor03_5@2x.png" />
          </navigator>
        </view>
      </view>
    </view>
    <!-- 底部提示 -->
    <view class="end">
      <text>我是有底线的！</text>
    </view>
    <!-- 回到顶部 -->
    <view class="goTop icon-top"></view>
  </view>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  onLoad () { },
  methods: {
  }
};
</script>

<style lang="scss">
// 首页
.index {
  // 轮播
  .slider {
    swiper,
    image {
      width: 750rpx;
      height: 340rpx;
    }
  }
  // 功能导航
  .navs {
    display: flex;
    padding: 30rpx;
    background: #fff;
    justify-content: space-between;
    navigator {
      width: 128rpx;
      height: 140rpx;
    }
  }

  // 栏目楼层
  .floor {
    .ftitle {
      padding-top: 30rpx;
      background: #f4f4f4;
      image {
        width: 750rpx;
        height: 60rpx;
      }
    }
    // pics
    .fitem {
      padding: 20rpx 16rpx 10rpx;
      overflow: hidden;
      navigator {
        float: left;
        width: 193rpx;
        height: 188rpx;
        margin-left: 10rpx;
        margin-bottom: 10rpx;
      }
      navigator:nth-child(1) {
        width: 232rpx;
        height: 386rpx;
        margin-left: 0;
      }
      navigator:nth-child(2),
      navigator:nth-child(5) {
        width: 273rpx;
        height: 188rpx;
      }
    }
    &:first-child {
      .fitem {
        navigator {
          width: 233rpx;
        }
      }
    }
  }
  .end {
    text-align: center;
    font-size: 24rpx;
    color: #999;
  }
  .goTop {
    position: fixed;
    bottom: 30rpx;
    /* #ifdef H5 */
    bottom: 65px;
    /* #endif */
    right: 30rpx;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100rpx;
    height: 100rpx;
    font-size: 48rpx;
    color: #666;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
  }
}

// 搜索
.search {
  display: flex;
  flex-direction: column;
  .sinput {
    box-sizing: border-box;
    padding: 20rpx 16rpx;
    background: #ff2d4a;
    position: relative;
    //伪元素
    &::after {
      position: absolute;
      top: 28rpx;
      left: 302rpx;
      content: "";
      width: 44rpx;
      height: 44rpx;
      line-height: 1;
      background-image: url(https://static.botue.com/ugo/images/icon_search%402x.png);
      background-size: 32rpx;
      background-position: 6rpx center;
      background-repeat: no-repeat;
    }
    input {
      background: #fff;
      flex: 1;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 24rpx;
      color: #bbb;
      border-radius: 5rpx;
    }
    button {
      display: none;
      margin-left: 20rpx;
      width: 150rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 24rpx;
      border-radius: 5rpx;
      background: transparent;
      color: #666;
    }
  }
  &.focused {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    .sinput {
      display: flex;
      background: #eee;
      input {
        text-align: left;
        padding-left: 60rpx;
      }
      button {
        display: block;
      }
      &::after {
        left: 30rpx;
      }
    }
  }
  .scontent {
    background: #fff;
    position: relative;

    flex: 1;
    padding: 27rpx;
    .title {
      font-size: 27rpx;
      line-height: 1;
      color: #333;
    }
    .clear {
      display: block;
      width: 27rpx;
      height: 27rpx;
      float: right;
      background-image: url(http://static.botue.com/ugo/images/clear.png);
      background-size: cover;
    }

    .history {
      padding-top: 30rpx;
      navigator {
        display: inline-block;
        line-height: 1;
        padding: 15rpx 20rpx 12rpx;
        background-color: #ddd;
        font-size: 24rpx;
        margin-right: 20rpx;
        margin-bottom: 15rpx;
        color: #333;
      }
    }

    .result {
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: #fff;
      navigator {
        line-height: 1;
        padding: 20rpx 30rpx;
        font-size: 24rpx;
        color: #666;
        border-bottom: 1px solid #eee;

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
</style>
